<template>
	<view class="page">
		<template v-if="isLogin">  
			<view class="body">
				<view class="form-wrap m-b2">
					<view class="form-item">
						<view class="label">选择药剂：</view>
						<picker class="form-picker" mode="selector" :range="potions" range-key="potion_name" @change="changePotion">
							<view class="picker">
								<input type="text" class="select-data t-l" v-model="params.potion_name" placeholder="选择药剂"
									disabled>
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view>
				</view>
				
				<!-- 药剂详情 -->
				<view v-if="params.potion_name" class="point-detail">
					<template v-if="loadingState.default">
						<loading :loadingState="loadingState"></loading>
					</template>
					<template v-else>
						<view class="detail-wrap m-b2">
							<view class="hd-title">药剂参数</view>
							<view class="info">
								<view class="item">
									<view class="label">药剂名称：</view>
									<view>{{detail.potion.potion_name}}</view>
								</view>
								<view class="item">
									<view class="label">品 牌：</view>
									<view>{{detail.potion.potion_brand}}</view>
								</view>
								<view class="item">
									<view class="label">剂 型：</view>
									<view>{{detail.potion.type_name}}</view>
								</view>
								<view class="item">
									<view class="label">防控对象：</view>
									<view>{{detail.potion.fk_pest}}</view>
								</view>
								<view class="item">
									<view class="label">农业登记号：</view>
									<view>{{detail.potion.registration_No}}</view>
								</view>
								<view class="item">
									<view class="label">生产许可证号：</view>
									<view>{{detail.potion.license_No}}</view>
								</view>
								<view class="item">
									<view class="label">农业标准号：</view>
									<view>{{detail.potion.standard_No}}</view>
								</view>
								<view class="item">
									<view class="label">药剂说明：</view>
									<view>{{detail.potion.potion_content}}</view>
								</view>
							</view>
						</view>
									
						<view class="detail-wrap m-b2">
							<view class="hd-title">包装照片</view>
							<view class="upload-pic-item">
								<view class="form-upload-pic">
									<view class="img-item" v-for="(item,index) in detail.files" :key="index">
										<image src="@/static/images/filter_bg.png" mode="widthFix" class="filter-bg">
											<!-- 占位 -->
										</image>
										<view class="img-wrap" @click="preview(index)">
											<image class="img" :src="img_path+item.file_path" mode="widthFix"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
						
						<view class="form-wrap m-b2">
							<view class="form-item">
								<view class="label">选择规格：</view>
								<picker class="form-picker" mode="selector" :range="detail.specs" range-key="spec"
									@change="changeSpecs">
									<view class="picker">
										<input type="text" class="select-data t-l" v-model="params.spec.name" placeholder="选择规格"
											disabled>
										<view class="icon">
											<view class="iconfont f-s68">&#xeb8a;</view>
										</view>
									</view>
								</picker>
							</view>
							<view v-if="params.spec.name" class="form-item">
								<view class="label">采购数量：</view>
								<view class="form-input">
									<view class="content">
										<input type="digit" class="inp" v-model="params.num" placeholder="输入采购数量"/>
										<view class="link">{{params.spec.pack_name}}</view>
									</view>
								</view>
							</view>
						</view>
						
					</template>
				</view>
				
				<template v-else>
					<empty icon="@/static/images/empty2.png">
						<view slot="msg">请选择采购药剂</view>
					</empty> 
				</template>  
				
			</view>
			
			<!-- 底部 -->
			<view class="footer">
				<view class="fix-wrap bottom">
					<view class="form-lay-btn" @click="buy">确定采购</view>
				</view>
			</view>		 
			
			
		</template>

	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue'
	import empty from '@/components/empty.vue'
	import {img_path} from '@/config.js'
	import {previewImage} from '@/common/util.js'
	export default {
		name: 'demo',
		data() {
			return { 
				isLogin: false,
				id: '',
				userInfo:uni.getStorageSync('userInfo'),
				loadingState: {
					default: true,
				},
				detail: {},
				img_path:img_path, 
				potions:[],				
				isStop:true,
				page:1,
				isFocus:false,
				params:{
					potion_name:'',
					specs:{ },
					spec:{
						id:'',
						name:'',
						pack_name:''
					},
					num:''
				}
			}
		},
		onShow() {

		},
		async onLoad(params) { 
			console.log(params)
			this.id = params.id;
			this.type=params.type;
			this.isLogin = await this.$loginState('check');
			if (this.isLogin) {
				this.potions=await this.getPotionList(); 
				if(params.id){ 
					this.potions.forEach(item=>{
						if(item.id==params.id){
							this.params.potion_name=item.potion_name;
						}
					})
					this.getPotionInfo(this.id);
				}
			}
		},
		methods: {
			
			// 获取药剂列表
			getPotionList:async function(){
				let res=await this.$api.ycj_api.getPotionList({
					page: this.page,
					type: this.type,
					is_app:1, 
					limit:''
				}) 				
				if(res.data.ret==0){ 					
					return res.data.data.list
				} 
			},
			
			// 选择药剂
			changePotion:function(e){
				let idx=e.detail.value;
				this.loadingState.default = true;
				let id=this.potions[idx].id;				
				this.params.potion_name=this.potions[idx].potion_name;
				this.getPotionInfo(id);
			},
			 			
			// 采购药剂详情
			getPotionInfo: async function(id) {
				let res = await this.$api.ycj_api.getPotionInfo({
					id: id
				}) 
				if (res.data.ret == 0) {
					this.loadingState.default = false;
					this.detail = res.data.data;
				}
			},
			
			// 图片预览
			preview:function(idx){				
				let img_list = [];
				this.detail.files.forEach(item => {
					img_list.push(this.img_path + item.file_path)
				})
				previewImage({
					index:idx,
					data:img_list
				})
			},
			
			// 切换规格
			changeSpecs:function(e){
				let idx=e.detail.value;
				this.params.specs=this.detail.specs[idx];
				this.params.spec.id=this.detail.specs[idx].id;
				this.params.spec.name=this.detail.specs[idx].spec;
				this.params.spec.pack_name=this.detail.specs[idx].pack_name; 
			},
			
			// 采购
			buy:async function(){
				let _this=this;
				if(this.params.spec.name==''){
					uni.showToast({
						icon: 'none',
						title: '请选择药剂规格',
						mask: true,
						duration: 1000
					})
					return
				}
				if(this.params.num==''||this.params.num==0){
					uni.showToast({
						icon: 'none',
						title: '购买数量至少为1'+this.params.spec.pack_name,
						mask: true,
						duration: 1000
					})
					return
				}else if(!(/(^[1-9]\d*$)/.test(this.params.num))){
					uni.showToast({
						icon: 'none',
						title: '请输入正确的数量',
						mask: true,
						duration: 1000
					})
					return
				}
				
				if(this.isStop){
					this.isStop=false;
					uni.showLoading({
						title:"数据提交中..."
					})
					let res=await this.$api.ycj_api.addDistribute({
						potion_sum: this.params.num,
						specs_id: this.params.specs.id,
						specs: this.params.specs,
						potion_id: this.detail.potion.id,
						fid: 0,
						uid: this.userInfo.id,
						f_uid: this.userInfo.id
					}) 
					if(res.data.ret==0){
						uni.hideLoading();
						uni.showToast({
							icon: 'success',
							title: '药剂采购成功',
							mask: true,
							duration: 2000,
							success() {
								_this.$store.commit('UPDATE_MY_YAOJI',1);   
								setTimeout(()=>{
									_this.isStop=true;
									uni.navigateBack({
										delta:1
									})
								},2000)
							}
						})
					}else{
						uni.hideLoading();
						uni.showToast({
							icon: 'success',
							title: res.data.message,
							mask: true,
							duration: 1000
						})
					}
				}
				
			}
		},
		computed: {

		},
		components: {
			loading,
			empty
		}
	}
</script>

<style lang="less">
	.hd-title {
		padding: 20rpx 0 0 20rpx;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.form-item{
		.link{
			color:#000!important;
		}
	}

	.info {
		padding: 20rpx 0 20rpx 20rpx;

		.item {
			display: flex;
			padding: 10rpx 0;
			font-size: 32rpx;
			color: #666;

			.label {
				flex-shrink: 0;
				width: 30%;
			}
		}
	}

	.detail-wrap {}
</style>
